﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Start Template for vpGrid</title>
    <!-- CSS -->
    <!-- CSS for jQuery UI with vpGrid theme-->
    <link href="Styles/jQuery-UI/vpGrid/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />

    <!-- CSS for qTip2-->
    <link href="Styles/qTip2/qTip2-2.2.0/jquery.qtip.min.css" rel="stylesheet" />

    <!-- CSS for jqGrid 4.6.0-->
    <link href="Styles/jqGrid/jqGrid-4.6.0/ui.jqgrid.css" rel="stylesheet" />

    <!-- CSS for vpGrid -->
    <link href="Styles/vpGrid/vpGrid-1.3.3.css" rel="stylesheet" />

    <!-- CSS for your Grid (to override any of the above CSS) -->
    <link href="Styles/myGrid/myGrid-0.0.1.css" rel="stylesheet" />


    <!-- JS -->
    <!-- JS for jQuery -->
    <script src="Scripts/jQuery/jquery-1.11.0.min.js"></script>

    <!-- JS for jQuery UI : reference the appropriate datepicker language for your Grid-->
    <script src="Scripts/jQuery-UI/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="Scripts/jQuery-UI/i18n/jquery.ui.datepicker-en-GB.js"></script>

    <!-- JS for qTip2 : do not reference the min version for IE-->
    <script src="Scripts/qTip2/qTip2-2.2.0/jquery.qtip.js"></script>

    <!-- JS for jqGrid : reference the appropriate language for your Grid-->
    <script src="Scripts/jqGrid/jqGrid-4.6.0/i18n/grid.locale-en.js"></script>
    <script src="Scripts/jqGrid/jqGrid-4.6.0/jquery.jqGrid.min.js"></script>

    <!-- JS for vpGrid : : reference the appropriate language for your Grid-->
    <script src="Scripts/vpGrid/vpGrid-1.3.3.js"></script>
    <script src="Scripts/vpGrid/i18n/vpGrid-1.3.3.locale-en.js"></script>

    <!-- JS for your Grid : your event handlers and all the grid customization work-->
    <script src="Scripts/myGrid/myGrid-0.0.3.js"></script>

</head>
<body>
    <!-- All components of vpGrid MUST be defined in div role="vpgrid-container" -->
    <div role="vpgrid-container" class="vpgrid-container">

        <!-- The grid is composed of the following parts :
            1°) Grid Title
            2°) Grid Header
            3°) Grid Body   -> where all data is displayed
            4°) Grid Footer -> contains all buttons for item or grid processing 
            5°) Partial layouts -> small UI parts that are dynamically injected in the grid
            6°) Modal dialog windows to handle form editing of data displayed in the grid
        -->

        <!--  Grid Title-->
        <h1 class="vpgrid-title">vpGrid in action</h1>

        <!-- Grid header -->
        <!-- the grid header holds any button to click on to do an action on a selected item or to do any global action.
         This header is similar to the ribbon encountered in Microsoft software like SharePoint and Office.
         This header can be used to hold fields used as remote filters. (Useful when the grid is configured with the option loadGridOnPageLoad : false)
        -->
        <div role="vpgrid-header" class="vpgrid-header ui-jqgrid ui-widget ui-widget-content ui-corner-bottom no-border">

            <div role="vpgrid-ribbon"
                 class="vpgrid-header-body">
                <!-- this button enables to create a new item inside a jQuery UI dialog.
                All form fields ara embedded in a fluent 12 columns grid.
                This fluent grid is inspired from twitter Bootstrap.
                Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItem"
                -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItem",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item
                </button>

                <!-- this button enables to create a new item inside a jQuery UI dialog with Tabs
                Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItemWithTabs"
                -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItemWithTabs",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item (UI tabs)
                </button>

                <!-- this button enables to view/edit the selected item inside a jQuery UI dialog with Tabs
            Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridEditItemWithTabs"
            -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-pencil"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-pencil"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialogWithSelectedItem", "params":"vpGridEditItemWithTabs",  "async" : true, "asyncKey" : "onEditItemClick"}}'>
                    View/Edit selected Item (UI tabs)
                </button>

                <!-- this button enables to open another vpGrid web page or any Web page (in the same doamin) within a jQuery UI Dialog
                (an automatic generated iframe within a jQuery UI Dialog)
                Click on this button will open the UI-Dialog identified by the params value : "params":{"dialogId":"serverSideDialog1", ...
            -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-search"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-search"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openServerSideDialogWithSelectedItem", "params":{"dialogId":"serverSideDialog1","sizeRatio":"0.9"},  "async" : true, "asyncKey" : "onChildItemClick"}}'>
                    View/Edit related child items
                </button>

            </div>
            <!-- end header body -->

        </div>
        <!-- end Grid header -->

        <!-- Grid body -->
        <div role="vpgrid-body" class="vpgrid-body">

            <!-- Grid Configuration : headers and columns-->
            <table role="vpgrid-schema" class="vpgrid-hidden">
                
                <!-- Configuration of caption, headers and columns -->
                <thead>
                    <!-- Configuration of custom caption 
                         Configuration starts with <div role="vpgrid-schema-caption"> 
                    -->
                    <tr class="ui-widget-header">
                        <th colspan="18">
                            <!-- The content of the following div will be dynamically injected in the jqGrid title bar.
                                 To enable this dynamic injection the vpGrid option 'enableCustomCaption' must be set to true (see below the call to vpGrid.init() method).
                            -->
                            <div role="vpgrid-schema-caption">
                                <span class="left">
                                    View products :
                                    <select id="kindOfProducts"
                                            data-vpgrid-ui-element="true"
                                            data-vpgrid-remote-data-filter-key="TypeOfProduct"
                                            data-vpgrid-datasource="MockRequests/GetKeyValues_AllKindOfProducts.html"
                                            data-vpgrid-datasource-type="web"
                                            data-vpgrid-timeline-sequence="GridLoaded"
                                            data-vpgrid-handlers='{"change" : { "handler" : "vpGrid.reloadGrid", "params":"kindOfProducts",  "async" : true, "asyncKey" : "onSelectChange"}}'></select>

                                </span>
                                <span role="vpgrid-ajax-trace" class='vpgrid-ajax-trace'></span>

                            </div>
                        </th>
                    </tr>
                    <!-- End Configuration of custom caption -->

                    <!-- Configuration of the Grid Columns -->
                    <tr role="vpgrid-schema-columns" class="ui-widget-header">

                        <!-- First column should be defined to hold the entity key of the item showed in the grid-->
                        <th class="center"
                            data-vpgrid-column-name="remoteId"
                            data-vpgrid-column-type="key"
                            data-vpgrid-column-width="1"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false">Remote ID</th>

                        <th class="center"
                            data-vpgrid-column-name="name"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="30"
                            data-vpgrid-column-fixed-width="false"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="true"
                            data-vpgrid-column-sortable="true"
                            data-vpgrid-column-filterable="true"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Product Name</th>


                        <th class="center"
                            data-vpgrid-column-name="producNumber"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="80"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-required="false"
                            data-vpgrid-column-sortable="true"
                            data-vpgrid-column-filterable="true"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Product Number</th>

                        <th class="center"
                            data-vpgrid-column-name="salable"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="50"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="select"
                            data-vpgrid-select-options="Yes:Yes;No:No;Maybe:Maybe"
                            data-vpgrid-column-align="center">On Sale</th>

                        <th class="center"
                            data-vpgrid-column-name="price"
                            data-vpgrid-column-type="currency"
                            data-vpgrid-column-width="70"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="true"
                            data-vpgrid-column-min-value="0"
                            data-vpgrid-column-max-value="6000"
                            data-vpgrid-column-align="right"
                            data-vpgrid-column-sortable="true"
                            data-vpgrid-column-filterable="true"
                            data-vpgrid-column-css="vpgrid-cell"
                            data-vpgrid-column-info="End user price. Does not include VAT">Price</th>

                        <th class="center"
                            data-vpgrid-column-name="style"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="select"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Style</th>

                        <th class="center"
                            data-vpgrid-column-name="safetyStockLevel"
                            data-vpgrid-column-type="int"
                            data-vpgrid-column-width="50"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-min-value="10"
                            data-vpgrid-column-max-value="1200"
                            data-vpgrid-column-required="true"
                            data-vpgrid-column-align="center"
                            data-vpgrid-column-css="vpgrid-cell">Safety Stock Level</th>

                        <th class="center"
                            data-vpgrid-column-name="color"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="true"
                            data-vpgrid-column-edittype="autocomplete"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Color</th>

                        
                        <th class="center"
                            data-vpgrid-column-name="weight"
                            data-vpgrid-column-type="number"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="false"
                            data-vpgrid-column-min-value="0"
                            data-vpgrid-column-max-value="1200"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Weight (LB)</th>

                        <th class="center"
                            data-vpgrid-column-name="year"
                            data-vpgrid-column-type="year"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="select"
                            data-vpgrid-column-align="center"
                            data-vpgrid-column-min-value=2010
                            data-vpgrid-column-max-value=2015
                            data-vpgrid-column-css="vpgrid-cell">Year</th>

                        <th class="center"
                            data-vpgrid-column-name="comments"
                            data-vpgrid-column-type="note"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Comments</th>

                        <!-- column required to manage item deletion -->
                        <th class="center"
                            data-vpgrid-column-name="isDeletable"
                            data-vpgrid-column-type="actionValidator"
                            data-vpgrid-column-actiontype="deleteItem"
                            data-vpgrid-column-width="20"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-align="center"></th>

                        <!-- column required to show the delete item  button-->
                        <th class="center"
                            data-vpgrid-column-name="delete"
                            data-vpgrid-column-type="action"
                            data-vpgrid-column-actiontype="deleteItem"
                            data-vpgrid-column-width="20"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-align="center"></th>

                        <!-- column required to manage item update-->
                        <th class="center"
                            data-vpgrid-column-name="isUpdatable"
                            data-vpgrid-column-type="actionValidator"
                            data-vpgrid-column-actiontype="updateItem"
                            data-vpgrid-column-width="10"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-css="vpgrid-cell"></th>

                    </tr>
                    <!-- End Configuration of the Grid Columns -->

                </thead>
                <!-- End configuration of caption, headers and columns -->

                <!-- configuration of the status bar of the grid 
                    the vpGrid Status bar can be hidden or showed through the option parameter :
                    enableCustomStatusBar: true|false
                -->
                <tfoot>
                    <tr class="ui-widget-header" colspan="8">
                        <td>
                            <div role="vpgrid-schema-status-bar">
                                <!-- The status bar can contain several distinct groups-->
                                <!-- Each group is isolated within a div class="vpgrid-status-group" -->
                                <div class="vpgrid-status-group vpgrid-hidden"
                                     data-vpgrid-ui-id="itemsCountStatus">
                                    
                                    > Items :
                                    <!-- vpGrid content placeholders are dynamic zones
                                        that are updated when the web page loads,
                                        and when items are added or deleted in the grid.
                                        HTML content is generated by the method defined by the data tag 'data-vpgrid-datasource'
                                    -->
                                    <span data-vpgrid-ui-content-placeholder="true"
                                          data-vpgrid-ui-id="vpGrid.filteredItemCount"
                                          data-vpgrid-datasource="vpGrid.filteredItemCount"
                                          data-vpgrid-datasource-type="handler"
                                          data-vpgrid-timeline-sequence="GridLoaded">
                                    </span>
                                    <!-- Above span will show the number of items showed in the grid-->
                                    <!--
                                    /
                                    <span data-vpgrid-ui-content-placeholder="true"
                                          data-vpgrid-ui-id="vpGrid.totalItemCount"
                                          data-vpgrid-datasource="vpGrid.totalItemCount"
                                          data-vpgrid-datasource-type="handler"
                                          data-vpgrid-timeline-sequence="GridLoaded">
                                    </span>
                                    -->
                                    <!-- Above span will show the number of items loaded in memory-->
                                </div>
                                <!-- End status group-->

                                <!-- status group to show the loading progress in the UI of the received data-->
                                <div class="vpgrid-status-group"
                                     data-vpgrid-ui-id="dataLoadingStatus">
                                    Loading data in grid (
                                    <span data-vpgrid-ui-id="dataLoadingProgress"></span>)
                                </div>
                                <!-- End statsus group-->
                            </div>
                        </td>
                    </tr>
                </tfoot>
                <!-- configuration of the status bar of the grid -->

            </table>
            <!-- End Grid Configuration : headers and columns-->

        </div>
        <!-- End Grid body-->

        <!-- Grid footer -->
        <!-- the grid footer holds any button to click on to do an action on a selected item or to do any global action.
             This footer is similar to the ribbon encountered in Microsoft software like SharePoint and Office.
        -->
        <div role="vpgrid-footer" class="vpgrid-footer ui-jqgrid ui-widget ui-widget-content ui-corner-bottom no-border">
            
            <div role="vpgrid-ribbon"
                 class="vpgrid-footer-body">
                <!-- this button enables to create a new item inside a jQuery UI dialog.
                    All form fields ara embedded in a fluent 12 columns grid. 
                    This fluent grid is inspired from twitter Bootstrap.
                    Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItem"
                    -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItem",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item
                </button>

                <!-- this button enables to create a new item inside a jQuery UI dialog with Tabs
                    Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItemWithTabs"
                -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItemWithTabs",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item (UI tabs)
                </button>

                <!-- this button enables to view/edit the selected item inside a jQuery UI dialog with Tabs
                Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridEditItemWithTabs"    
                -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-pencil"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-pencil"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialogWithSelectedItem", "params":"vpGridEditItemWithTabs",  "async" : true, "asyncKey" : "onEditItemClick"}}'>
                    View/Edit selected Item (UI tabs)
                </button>

                <!-- this button enables to open another vpGrid web page or any Web page (in the same doamin) within a jQuery UI Dialog 
                    (an automatic generated iframe within a jQuery UI Dialog)
                    Click on this button will open the UI-Dialog identified by the params value : "params":{"dialogId":"serverSideDialog1", ...    
                -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-search"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-search"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openServerSideDialogWithSelectedItem", "params":{"dialogId":"serverSideDialog1","sizeRatio":"0.9"},  "async" : true, "asyncKey" : "onChildItemClick"}}'>
                    View/Edit related child items
                </button>

            </div>
            <!-- end footer body -->

        </div>
        <!-- end Grid footer -->


        <!-- Partial layouts-->

        <!-- Message shown to the user when the grid cannot load data due to Communication/Server error-->
        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridErrorOnDataLoad"
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p>
                The grid is empty because of a communication error. Check that the server is up and running.
            </p>
        </div>

        <!-- Message shown to the user when the grid received no data from server -->
        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridEmptyOnDataLoad"
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p data-vpgrid-ui-id="customMessage">
                The grid is empty because there is no item to load from your request.
            </p>
        </div>

        <!-- Message shown to the user when user is filtering the grid but no data match the filter(s) -->
        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridEmptyOnGridComplete"
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p>
                No data has been found for your search. Either change the filter value or reset at least one filter.
            </p>
        </div>

        <!-- End Partial layouts -->


        <!-- Modal dialog windows-->

        <!-- The loading window -->
        <div role="vpgrid-modal-dialog"
             title="Communicating with server..."
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridLoading"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoading">

            <span class="ui-icon  ui-icon-clock" style="float: left; margin: 3px 7px 40px 0;"></span>
            Please wait until all data is loaded ...
        </div>


        <!-- Modal dialog Window to insert new items in the Grid -->
        <div role="vpgrid-modal-dialog"
             title="Add new Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridAddNewItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">


            <div class="form-vpgrid-modal-dialog">
                <!-- Field : Product Name-->
                <div class="vp-row">
                    <!-- label -->
                    <div class="span4 text-right ">Product Name :</div>
                    <!-- input cell -->
                    <div class="span8 text-center text-small">
                        <input type="text" name="name" id="name"
                               class="text ui-widget-content ui-corner-all"
                               data-vpgrid-column-name="name"/>
                    </div>
                    <!-- end input cell -->
                </div>
                <!-- end Field : Product Name-->


                <!-- Field : Price -->
                <div class="vp-row">
                    <!-- label -->
                    <div class="span4 text-right ">Price :</div>
                    <!-- input cell -->
                    <div class="span8 text-center text-small">
                        <input type="text" name="price" id="price"
                               class="text ui-widget-content ui-corner-all"
                               data-vpgrid-column-name="price" />
                    </div>
                    <!-- end input cell -->
                </div>
                <!-- end Field : Price-->


                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">
                        <!-- The OK button -->
                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-plusthick"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.addNewItem", "params":"last", "async" : true}}'>
                            Add
                        </button>

                        <!-- The Cancel button -->
                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
            </div>

        </div>
        <!-- End Modal Dialog vpGridAddNewItem-->

        <!-- Modal Dialog vpGridAddNewItemWithTabs -->
        <div role="vpgrid-modal-dialog"
             title="Add new Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridAddNewItemWithTabs"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <div class="form-vpgrid-modal-dialog">
                <!-- tabs -->
                <div data-vpgrid-ui-widget="tabs"
                     data-vpgrid-ui-widget-options='{"active": "0", "heightStyle" : "content"}'
                     data-vpgrid-timeline-sequence="GridLoaded">
                    <ul>
                        <li><a href="#tabs-1">tab1</a></li>
                        <li><a href="#tabs-2">tab2</a></li>
                    </ul>
                    <!-- TAB 1-->
                    <div id="tabs-1">

                        <!-- Field : Product Name-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Product Name :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="name" id="name"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="name" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Product Name-->

                        <!-- Field : Price -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Price :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="price" id="price"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="price" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Price-->

                        <!-- Field : Style -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Style :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <select id="style"
                                        data-vpgrid-column-name="style"
                                        data-vpgrid-timeline-sequence="GridLoaded">
                                    <option>Universal</option>
                                    <option>Women's</option>
                                </select>
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Style-->

                        <!-- Field : Weight -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Weight :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="weight" id="weight"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="weight" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Weight-->


                    </div>
                    <!-- end TAB 1-->

                    <!-- TAB 2-->
                    <div id="tabs-2">
                    </div>
                    <!-- end TAB 2-->

                </div>
                <!-- end tabs -->

                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">
                        <!-- The OK button -->
                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-plusthick"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.addNewItem", "params":"last", "async" : true}}'>
                            Add
                        </button>

                        <!-- The Cancel button -->
                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
            </div>

        </div>
        <!-- End Modal Dialog vpGridAddNewItemWithTabs -->

        <!-- Modal Dialog vpGridEditItemWithTabs -->
        <div role="vpgrid-modal-dialog"
             title="View/Edit Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridEditItemWithTabs"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">


            <!-- Dialog title content redefinition : automatic customization of the UI-dialog title bar-->
            <div role="vpgrid-dialog-title-bar" class="vpgrid-hidden ">
                <span>View/Edit Item : </span>
                <span data-vpgrid-column-name="name"></span>
            </div>
            <!-- End Dialog title content definition-->


            <div class="form-vpgrid-modal-dialog">

                <!-- hidden input fields-->
                <input type="hidden" data-vpgrid-column-name="remoteId" />
                <!-- end hidden input fields-->

                <!-- tabs -->
                <div data-vpgrid-ui-widget="tabs"
                     data-vpgrid-ui-widget-options='{"active": "0", "heightStyle" : "content"}'
                     data-vpgrid-timeline-sequence="GridLoaded">
                    <ul>
                        <li><a href="#tabs-1">tab1</a></li>
                        <li><a href="#tabs-2">tab2</a></li>
                    </ul>
                    <!-- TAB 1-->
                    <div id="tabs-1">

                        <!-- Field : Product Name-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Product Name :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="name" id="name"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="name" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Product Name-->

                        <!-- Field : Price -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Price :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="price" id="price"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="price" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Price-->

                        <!-- Field : Style -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Style :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <select id="style"
                                        data-vpgrid-column-name="style"
                                        data-vpgrid-timeline-sequence="GridLoaded">
                                    <option>Universal</option>
                                    <option>Women's</option>
                                </select>
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Style-->

                    </div>
                    <!-- end TAB 1-->

                    <!-- TAB 2-->
                    <div id="tabs-2">
                    </div>
                    <!-- end TAB 2-->

                </div>
                <!-- end tabs -->

                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-circle-arrow-e"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-circle-arrow-e"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.updateItem", "params":{"tag":"partialUpdate1", "crudKey":"update2"}, "async" : true}}'>
                            Update
                        </button>

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
            </div>

        </div>
        <!-- End Modal Dialog vpGridEditItemWithTabs -->

        <!-- Modal Dialog vpGridDeleteItem -->
        <div role="vpgrid-modal-dialog"
             title="Delete Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridDeleteItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <!-- Dialog title content redefinition : automatic customization of the UI-dialog title bar-->
            <div role="vpgrid-dialog-title-bar" class="vpgrid-hidden ">
                <span>Delete Item : </span>
                <span data-vpgrid-column-name="name"></span>
            </div>
            <!-- End Dialog title content definition-->

            <span class="ui-icon  ui-icon-alert" style="float:left; margin:3px 7px 40px 0;">

            </span>
            <span>Do you want to really delete this item?</span>

            <hr />
            <div class="vp-row  vp-modal-dialog-bottom-buttons">
                <div class="span12">

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-trash"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-trash"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.deleteCurrentRow", "async" : true}}'>
                        Delete
                    </button>

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                        Cancel
                    </button>

                </div>

            </div>

        </div>
        <!-- End Modal Dialog vpGridDeleteItem -->


        <!-- Modal Dialog vpGridCannotDeleteItem -->
        <div role="vpgrid-modal-dialog"
             title="Delete Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridCannotDeleteItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <span class="ui-icon  ui-icon-alert" style="float:left; margin:3px 7px 40px 0;">

            </span>
            <span>The selected item cannot be deleted.</span>

            <hr />
            <div class="vp-row  vp-modal-dialog-bottom-buttons">
                <div class="span12">

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                        Ok
                    </button>

                </div>

            </div>

        </div>
        <!-- End Modal Dialog vpGridCannotDeleteItem -->

        <!-- Modal Dialog vpGridToBeDone -->
        <!-- use this modal dialog to mockup button actions in the grid-->
        <div role="vpgrid-modal-dialog"
             title=""
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridToBeDone"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 40px 0;"></span>
            To be done
        </div>
        <!-- End Modal Dialog vpGridToBeDone -->

        <!-- Modal Dialog serverSideDialog1 -->
        <!-- Use this kind of modal dialog to show external web page in a jQuery UI Dialog-->
        <div role="vpgrid-modal-dialog"
             title=""
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="serverSideDialog1"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded"
             data-vpgrid-url="StartTemplate.html">
        </div>


        <!-- End Modal dialog windows -->

    <!-- End vpGrid Container-->

    <!-- vpGrid initialization-->
    <script>
        $(function () {
            vpGrid.init(
                {
                    enableAutomaticPropagationOfUpdateInsertDeleteOperations: true,
                    defaultCaption: "AdventureWorks Products",
                    enableCustomCaption : true,
                    enableFilterToolbar: true,
                    enableOperatorsInFilterToolbar: true,
                    enableCustomStatusBar: true,
                    enableRowCheckbox: true,
                    numberOfVisibleRows: 11,
                    enableColumnReordering: true,
                    enableRemoteLogging: true,
                    remoteLoggingUrl: "api/v1/log/js",
                    locale: 'en',

                    datepickerOptions: {
                        dateFormat: 'yy/mm/dd'
                    },
                    crudOptions: {
                        read: "MockRequests/GetDataN.html",
                        insert: "MockRequests/insert1.html",
                        update: "MockRequests/update1.html",
                        'delete': "MockRequests/delete1.html",
                        update2: "MockRequests/update2.html"

                    },
                    jqGridOptions: {
                        jgrid: {
                            formatter: {
                                integer: { thousandsSeparator: ",", defaultValue: '0' },
                                //integer: { thousandsSeparator: " ", defaultValue: '0' },

                                number: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00' },
                                //number: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0,00' },

                                currency: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix: " $", defaultValue: '0' },
                                //currency: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix: " €", defaultValue: '0' },

                                date: { srcformat: 'Y-m-d', newformat: 'Y/m/d' },
                            }
                        }
                    }

                });

        });
    </script>
    <!-- end vpGrid initialization-->

</body>
</html>
